<style lang="less" scoped>

  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #ffffff;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-form-item {
    margin: 0px 20px 15px 20px;
  }

  .f-bs1 {
    border: 1px solid #dfe6ec;
  }

  .el-collapse {
    border: 0px;
    .el-collapse-item {
      border: 1px solid #dfe6ec;
      margin-bottom: 10px;
      .el-collapse-item__header {
        font-weight: bold;
        .el-collapse-item__header__arrow {
          display: none;
        }
      }
      .el-collapse-item__content {
        padding-bottom: 0px;
      }
      .el-collapse-item__wrap {
        border-bottom: 0px;
      }
    }
  }

  label {
    width: 100px;
  }

  .el-form-item[data-v-7da61f17] {
    margin: 0 0 0 0
  }

  .f-mt10 {
    margin-top: 10px;
  }

  .f-ml20 {
    margin-left: 20px;
  }

  .f-mr20 {
    margin-right: 20px;
  }

  .f-mb10 {
    margin-bottom: 10px;
  }

  .f-tar {
    text-align: right;
  }

  .f-h30 {
    height: 30px;
  }

  .f-c-red {
    color: red;
  }

  .el-radio-group {
    width: 60%;
  }

  .el-radio-invoice {
    margin-right: 30px;
  }

  .f-color {
    color: #25baaf;
  }

  .el-textarea {
    width: 86%;
  }

  .f-mb {
    margin-bottom: 0;
  }

  .f-fr {
    float: right;
  }

  .f-fl {
    float: left;
  }

  .f-lh38 {
    line-height: 38px;
  }

  .el-select {
    width: 100%;
  }

  .f-w233 {
    width: 100%;
  }

  .el-form-item__label {
    width: 150px;
  }

  .el-date-editor.el-input {
    width: 100%;
  }

  li {
    list-style-type: none;
  }

  .color-c8c8c8 {
    color: #c8c8c8;
  }

  .f-mt {
    margin-top: 0;
  }

  .width70 {
    width: 70%;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<template>
  <section>
    <!--工具条-->
    <search-bar more-display>
      <el-row>
        <el-col :span="8">
          <el-form-item label="轮播标题">
            <el-input  v-model="searchCondition.LIKE_name" placeholder="请输入轮播标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>

    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="primary" @click="myReset" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchAdvertisementPicture" style="float: right">查询</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange"
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" width="100" label="序号">
      </el-table-column>
      <el-table-column prop="name" label="轮播标题" >
      </el-table-column>
      <el-table-column prop="applyScenename" label="应用场景" width="300" >
      </el-table-column>

      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button  type="primary" @click="getEditBYId(scope.$index, scope.row)">编辑 </el-button>
          <el-button type="danger"  @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary"  @click="getAdvertisementPictureDetailById(scope.$index, scope.row)">
            图片设置
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!--新增图片轮播弹窗 -->
    <el-dialog :title="dialogTitle" size="tiny" :visible.sync="advertisementPictureVisible" :close-on-click-modal="false">
      <el-form :model="advertisementPicture" :rules="rules" label-width="110px" ref="advertisementPicture">

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="轮播标题" class="width70" prop="name">
              <el-input v-model="advertisementPicture.name" placeholder="请输入轮播标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="应用场景" class="width70" prop="applyScene">
              <el-select  v-model="advertisementPicture.applyScene"
                         placeholder="请选择">
                <el-option
                  v-for="item in $store.getters.TERMINAL_TYPE"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="advertisementPictureVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--打开图片轮播详情       弹窗 -->
    <el-dialog :title="addadvertisementDetailTitle" size="large" :visible.sync="addadvertisementPictureDetailVisible"
               :close-on-click-modal="false">
      <search-bar>
        <el-row>
          <el-col :span="8">
            <el-form-item label="图片标题">
              <el-input  v-model="searchDetailCondition.LIKE_name" placeholder="请输入图片标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </search-bar>

      <!-- 图片轮播详情操作 -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="addDetail">新增</el-button>
        <el-button type="primary" @click="myResetDetail" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchAdvertisementPictureDetail" style="float: right">查询</el-button>
      </el-col>
      <!--图片轮播详情列表-->
      <el-table :data="advertisementDetail" highlight-current-row border @sort-change="sortChange1"
                @selection-change="selsChange1" v-loading="listLoading1" style="width: 100%;">
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="图片标题" width="200" >
        </el-table-column>
        <el-table-column prop="pictureUrl" label="图片地址" >
        </el-table-column>
        <el-table-column prop="skipTypeName" label="跳转分类" width="200" >
        </el-table-column>
        <el-table-column prop="sorts" label="排序" width="100" >
        </el-table-column>

        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button  type="primary" @click="EditAdvertisementDetailBYId(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="danger"  @click="delDetailById(scope.$index, scope.row)">删除</el-button>
            <el-button v-if="scope.row.status === 111002001" type="warning"
                       @click="modifyDetailStop(scope.$index, scope.row)">
              禁用
            </el-button>
            <el-button v-if="scope.row.status === 111002002" type="success"
                       @click="modifyDetailStart(scope.$index, scope.row)">
              启用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-row>
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="currentPage1"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            layout="total,sizes,prev, pager, next, jumper"
            :total="total1" style="float: right">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>

    <!--新增图片轮播详情弹窗 -->
    <el-dialog :title="advertisementDetailTitle"  :visible.sync="advertisementPictureDetailVisible"
               :close-on-click-modal="false">
      <el-form :model="advertisementPictureDetail" :rules="rules1" label-width="300px" ref="advertisementPictureDetail">

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="图片标题" class="width70" prop="name">
              <el-input v-model="advertisementPictureDetail.name" placeholder="请输入图片标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="上传图片" prop="pictureUrl">
              <el-upload
                :headers="this.$store.state.headersAuthorization"
                class="avatar-uploader"
                action="/api/v3.0/admin/api/stm_advertisement_picture_details_picture"
                :show-file-list="false"
                :on-error="handleAvatarError"
                :on-remove="handleRemove"
                :on-success="handlePreview"
                :before-upload="beforeAvatarUpload">
                <img width="75%" v-if="oldHeadUrl && advertisementPictureDetail.pictureUrl"
                     :src=advertisementPictureDetail.pictureUrl
                     class="avatar">
                <img v-else-if="!oldHeadUrl && tempCurrentHeadUrl" :src="tempCurrentHeadUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-form-item label="跳转分类" prop="skipType">
            <el-radio-group v-model="advertisementPictureDetail.skipType">
              <el-radio :label="114006001" style="float: left">广告大图

              </el-radio>
              <el-radio :label="114006002" style="float: left">信息页面

              </el-radio>
              <el-radio :label="114006003" style="float: left">功能页面

              </el-radio>
            </el-radio-group>
            <br>
            <div v-if="advertisementPictureDetail.skipType == 114006001">
              <el-upload
                :headers="this.$store.state.headersAuthorization"
                class="avatar-uploader"
                action="/api/v3.0/admin/api/stm_advertisement_picture_details_picture"
                :show-file-list="false"
                :on-error="handleAvatarError"
                :on-remove="handleRemove"
                :on-success="handlePreview1"
                :before-upload="beforeAvatarUpload">
                <img width="75%" v-if="oldHeadUrl1 && advertisementPictureDetail.bigPictureUrl"
                     :src=advertisementPictureDetail.bigPictureUrl
                     class="avatar">
                <img v-else-if="!oldHeadUrl1 && tempCurrentHeadUrl1" :src="tempCurrentHeadUrl1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <el-select  class="width70"
                       v-if="advertisementPictureDetail.skipType == 114006002"
                       v-model="advertisementPictureDetail.messageList"
                       placeholder="请选择">
              <el-option
                v-for="item in $store.getters.BANNER_FUNCTION_LIST"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
            <el-select  class="width70"
                       v-if="advertisementPictureDetail.skipType == 114006003"
                       v-model="advertisementPictureDetail.messageList"
                       placeholder="请选择">
              <el-option
                v-for="item in $store.getters.BANNER_FUNCTION_LIST"
                :key="item.dictVal"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>

          </el-form-item>
        </el-row>
        <el-row class="f-mt10 f-mb10">
          <el-col :span="24">
            <el-form-item label="排序" class="width70" prop="sorts">
              <el-input type="number" v-model.number="advertisementPictureDetail.sorts" placeholder="请输入排序"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="advertisementPictureDetailVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdvertisementPictureDetail" :loading="submitLoading2">提交
        </el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import {
  searchAdvertisementPictures,
  saveAdvertisementPicture,
  delAdvertisementPicture,
  getDetailById,
  saveAdvertisementPictureDetail,
  modifyStatus,
  delAdvertisementPictureDetail,
  getAdvertisementPictureById
} from '../../api/v3/advertisementPicture';
import {objToFilter, resetObjNull, isEmpty} from '../../lib/util';
export default {
  data () {
    return {

      tempCurrentHeadUrl: '',
      tempCurrentHeadUrl1: '',
      // 临时显示图片
      oldHeadUrl: true,
      oldHeadUrl1: true,
      currendId: '', // 当前的图片轮播ID
      searchCondition: {
        LIKE_name: null
      },
      searchDetailCondition: {
        LIKE_name: null
      },
      dialogTitle: '新增',
      addadvertisementDetailTitle: '新增',
      advertisementDetailTitle: '新增',
      condition: {
        name: '',
        number: ''
      },
      tableData: [],
      sels: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'ascending',
      listLoading: false,
      submitLoading: false,
      advertisementDetail: [],
      sels1: [],
      total1: 0,
      currentPage1: 1,
      pageSize1: 10,
      sortProp1: null,
      sortOrder1: 'ascending',
      listLoading1: false,
      submitLoading1: false,
      submitLoading2: false,
      advertisementPictureVisible: false,
      addadvertisementPictureDetailVisible: false,
      advertisementPictureDetailVisible: false,
      pictureUrl: [],
      bigPictureUrl: [],
      // 图片轮播表单数据
      advertisementPicture: {
        'id': null,
        'name': null,
        'applyScene': null,
        'applyScenename': null,
        'advertisementPictureDetailCollection': null,
        'status': null
      },
      // 图片轮播详情表单数据
      advertisementPictureDetail: {
        'id': null,
        'advertisementPictureId': null,
        'name': null,
        'pictureUrl': null,
        'skipType': null,
        'messageList': null,
        'bigPictureUrl': null,
        'httpHead': null,
        'sorts': null,
        'status': null
      },
      // 图片轮播详情
      rules1: {
        name: [
          {required: true, message: '请输入轮播标题', trigger: 'blur'},
          {min: 2, max: 60, message: '长度在2到 60 个字符', trigger: 'blur'}
        ],
        pictureUrl: [
          {required: true, message: '请上传图片', trigger: 'blur'}
        ],
        skipType: [
          {type: 'number', required: true, message: '请选择跳转分类', trigger: 'blur'}
        ],
        sorts: [
          {type: 'number', required: true, message: '请输入序号', trigger: 'blur'}
        ]
      },
      // 图片轮播验证规则
      rules: {
        name: [
          {required: true, message: '请输入轮播标题', trigger: 'blur'},
          {min: 2, max: 60, message: '长度在2到 60 个字符', trigger: 'blur'}
        ],
        applyScene: [
          {type: 'number', required: true, message: '请选择应用场景', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    handleAvatarError () {
      this.$message.error('上传图片失败!');
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 图片轮播详情禁用
    modifyDetailStop (index, row) {
      this.$confirm('确认禁用该图片吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        let status = 111002002;
        modifyStatus(row.id, status).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '禁用成功！',
            type: 'success'
          });
          this.searchAdvertisementPictureDetail();
        });
      }).catch(() => {
      });
    },
    // 图片轮播详情启用
    modifyDetailStart (index, row) {
      this.$confirm('确认显示该图片吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        let status = 111002001;
        modifyStatus(row.id, status).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '显示成功！',
            type: 'success'
          });
          this.searchAdvertisementPictureDetail();
        });
      }).catch(() => {
      });
    },
    // 图片地址赋值
    handlePreview (res, file) {
      this.oldHeadUrl = false;
      this.advertisementPictureDetail.pictureUrl = file.response;
      this.tempCurrentHeadUrl = URL.createObjectURL(file.raw);// 临时
    },
    handlePreview1 (res, file) {
      this.oldHeadUrl1 = false;
      this.advertisementPictureDetail.bigPictureUrl = file.response;
      this.tempCurrentHeadUrl1 = URL.createObjectURL(file.raw);// 临时
    },
    // 图片上传限制
    beforeAvatarUpload (file) {
      let isJPG = false;
      if (file.type) {
        const fileTypes = 'image/jpeg;image/png;image/bmp;image/tiff;image/wmf';
        isJPG = fileTypes.indexOf(file.type) !== -1;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/BMP/TIFF/WMF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 删除单条数据操作
    handleDel (index, row) {
      this.$confirm('确认删除该图片轮播吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        delAdvertisementPicture(row.id).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.getTableData();
        });
      }).catch(() => {
      });
    },
    // 删除图片轮播详情数据操作
    delDetailById (index, row) {
      this.$confirm('确认删除该图片吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        delAdvertisementPictureDetail(row.id).then((res) => {
          this.listLoading = false;
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.searchAdvertisementPictureDetail();
        });
      }).catch(() => {
      });
    },
    // 打开编辑界面
    getEditBYId (index, row) {
      this.resetForm();
      this.advertisementPicture = Object.assign({}, row);
      this.dialogTitle = '修改';
      this.advertisementPictureVisible = true;
    },
    // 打开图片轮播详情编辑界面
    EditAdvertisementDetailBYId (index, row) {
      this.oldHeadUrl = false;
      this.oldHeadUrl1 = false;
      this.resetDetail();
      getAdvertisementPictureById(row.id).then((res) => {
        if (res.data) {
          this.oldHeadUrl = true;
          this.oldHeadUrl1 = true;
          this.advertisementPictureDetail = res.data;
          if (!isEmpty(res.data.pictureUrl)) {
            this.advertisementPictureDetail.pictureUrl = '/' + res.data.pictureUrl;
          }
          if (!isEmpty(res.data.bigPictureUrl)) {
            this.advertisementPictureDetail.bigPictureUrl = '/' + res.data.bigPictureUrl;
          }
        }
      });
      this.advertisementDetailTitle = '修改';
      this.advertisementPictureDetailVisible = true;
    },
    // 搜索 栏重置
    myReset () {
      resetObjNull(this.searchCondition);
    },
    myResetDetail () {
      resetObjNull(this.searchDetailCondition);
    },
    loadingLists (filter) {
      this.listLoading = true;
      searchAdvertisementPictures({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: (this.sortProp === null ? '' : this.sortProp + (this.sortOrder === 'ascending' ? ',desc' : ',asc'))
      }).then(res => {
        if (res.data) {
          this.tableData = res.data;
          this.total = Number(res.headers['x-total-count']);
          this.listLoading = false;
        }
      });
    },
    // 图片轮播 搜索栏搜索
    searchAdvertisementPicture () {
      this.loadingLists(objToFilter(this.searchCondition));
    },
    // 图片轮播详情 搜索栏搜索
    searchAdvertisementPictureDetail () {
      this.adverDetail(objToFilter(this.searchDetailCondition));
    },
    adverDetail (filter) {
      let str = 'EQ_parent.id=' + this.currendId + ';';
      filter = str + filter;
      getDetailById({
        filters: filter,
        size: this.pageSize1,
        page: this.currentPage1 - 1,
        sort: (this.sortProp1 === null ? '' : this.sortProp1 + (this.sortOrder1 === 'ascending' ? ',desc' : ',asc'))
      }).then(res => {
        if (res.data) {
          this.advertisementDetail = res.data;
          this.total1 = Number(res.headers['x-total-count']);
          this.listLoading1 = false;
        }
      });
    },
    // 保存图片轮播详情
    saveAdvertisementPictureDetail () {
      // 表单验证
      this.$refs['advertisementPictureDetail'].validate((valid) => {
        if (valid) {
          this.advertisementPictureDetail.parentId = this.currendId;
          if (this.advertisementPictureDetail.bigPictureUrl == null && this.advertisementPictureDetail.messageList == null) {
            return this.$message.error('请至少选择一个跳转分类的功能');
          }
          if (this.advertisementPictureDetail.skipType === 114006001) {
            this.advertisementPictureDetail.messageList = '';
            if (this.advertisementPictureDetail.bigPictureUrl === null) {
              return this.$message.error('请上传图片');
            }
          }
          if (this.advertisementPictureDetail.skipType === 114006002) {
            this.advertisementPictureDetail.bigPictureUrl = '';
            if (this.advertisementPictureDetail.messageList === null) {
              return this.$message.error('请选择信息页面');
            }
          }
          if (this.advertisementPictureDetail.skipType === 114006003) {
            this.advertisementPictureDetail.bigPictureUrl = '';
            if (this.advertisementPictureDetail.messageList === null) {
              return this.$message.error('请选择功能页面');
            }
          }
          if (this.advertisementPictureDetail.pictureUrl.startsWith('/')) {
            this.advertisementPictureDetail.pictureUrl = this.advertisementPictureDetail.pictureUrl.substring(1, this.advertisementPictureDetail.pictureUrl.length);
          }
          if (this.advertisementPictureDetail.bigPictureUrl.startsWith('/')) {
            this.advertisementPictureDetail.bigPictureUrl = this.advertisementPictureDetail.bigPictureUrl.substring(1, this.advertisementPictureDetail.bigPictureUrl.length);
          }
          this.submitLoading2 = true;
          saveAdvertisementPictureDetail(this.advertisementPictureDetail).then((res) => {
            this.submitLoading2 = false;
            if (res.data) {
              this.advertisementPictureDetailVisible = false;
              this.oldHeadUrl1 = true;
              this.oldHeadUrl = true;
              this.resetDetail();
              //  this.getAdvertisementPictureDetailById2(this.currendId);
              this.searchAdvertisementPictureDetail();
              this.$message.success('保存/修改成功！');
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          return false;
        }
      });
    },
    // 新增数据提交
    handleSubmit () {
      // 表单验证
      this.$refs['advertisementPicture'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          saveAdvertisementPicture(this.advertisementPicture).then((res) => {
            this.submitLoading = false;
            if (res.data) {
              this.advertisementPictureVisible = false;
              this.searchAdvertisementPicture();
              this.$message.success('保存/修改成功！');
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          return false;
        }
      });
    },
    // 弹出添加窗体
    handleAdd () {
      this.dialogTitle = '新增';
      this.resetForm();
      this.advertisementPictureVisible = true;
    },
    // 弹出图片轮播详情添加窗体
    addDetail () {
      this.advertisementPictureDetail.pictureUrl = '';
      this.tempCurrentHeadUrl = '';
      this.advertisementDetailTitle = '新增';
      this.resetDetail();
      this.advertisementPictureDetailVisible = true;
    },
    // 弹出图片轮播详情窗体
    getAdvertisementPictureDetailById (index, row) {
      let id = row.id;
      getDetailById(
        {
          filters: 'EQ_parent.id=' + row.id,
          sort: '',
          page: this.currentPage - 1,
          size: this.pageSize
        }
      ).then((res) => {
        if (res.data) {
          this.currendId = id;
          this.advertisementDetail = res.data;
          this.total1 = Number(res.headers['x-total-count']);
          this.listLoading1 = false;
        }
      });
      this.addadvertisementDetailTitle = '新增';
      this.addadvertisementPictureDetailVisible = true;
    },

    getAdvertisementPictureDetailById2 (id) {
      getDetailById(
        {
          filters: 'EQ_advertisementPicture.id=' + id,
          sort: '',
          page: this.currentPage - 1,
          size: this.pageSize
        }
      ).then((res) => {
        if (res.data) {
          this.advertisementDetail = res.data.detailModelList;
          this.total1 = Number(res.headers['x-total-count']);
          this.listLoading1 = false;
        }
      });
    },
    // 重置图片轮播表单
    resetForm () {
      if (this.$refs.advertisementPicture) {
        this.$refs.advertisementPicture.resetFields();
      }
      // 当先点击修改，再点击新增，会出现值没有清空,修复处理
      for (let p in this.advertisementPicture) {
        if (this.advertisementPicture[p] instanceof Array) {
          this.advertisementPicture[p] = [];
        } else {
          this.advertisementPicture[p] = null;
        }
      }
    },
    // 重置图片轮播详情表单
    resetDetail () {
      if (this.$refs.advertisementPictureDetail) {
        this.$refs.advertisementPictureDetail.resetFields();
      }
      // 当先点击修改，再点击新增，会出现值没有清空,修复处理
      for (let p in this.advertisementPictureDetail) {
        if (this.advertisementPictureDetail[p] instanceof Array) {
          this.advertisementPictureDetail[p] = [];
        } else {
          this.advertisementPictureDetail[p] = null;
        }
      }
    },
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchAdvertisementPicture();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchAdvertisementPicture();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchAdvertisementPicture();
    },
    // 多选操作
    selsChange1 (sels) {
      this.sels1 = sels;
    },
    // 排序操作
    sortChange1 (o) {
      this.sortProp1 = o.prop;
      this.sortOrder1 = o.order;
      this.searchAdvertisementPictureDetail();
    },
    // 每页几条操作
    handleSizeChange1 (val) {
      this.pageSize1 = val;
      this.searchAdvertisementPictureDetail();
    },
    // 第几页操作
    handleCurrentChange1 (val) {
      this.currentPage1 = val;
      this.searchAdvertisementPictureDetail();
    },

    // 获取表格数据
    getTableData () {
      this.listLoading = true;
      searchAdvertisementPictures({
        filters: '',
        sort: '',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data;
          this.total = Number(res.headers['x-total-count']);
          this.listLoading = false;
        }
      });
    }
  },
  // 初始化数据
  mounted () {
    this.getTableData();
    this.$store.commit('initDict');
  }
};
</script>

<style lang="less">

</style>
